<template>
  <div>
    <div class="tool-bar">
      <div>
        <el-button type="primary" size="small" @click="openUserDialog"
          >新增</el-button
        >
        <el-button type="default" size="small" @click="removeUser"
          >删除</el-button
        >
      </div>
      <span>合计：{{groupMemberList.length}}人</span>
    </div>

    <el-table
      ref="memberTable"
      :data="groupMemberList"
      :resizable="false"
      style="width: 100%"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column type="index" width="100" label="序号"></el-table-column>
      <el-table-column prop="realname" label="人员">
        <template slot-scope="scope">
          <span>{{scope.row.realname}}({{scope.row.username}})</span>
        </template>
      </el-table-column>
      <el-table-column prop="lineNames" label="产线"></el-table-column>
      <el-table-column prop="workStationNames" label="工位">
        <template slot-scope="scope">
          <template v-if='scope.row && scope.row.workStationDtos'>
            <el-button type="text" v-for='item in scope.row.workStationDtos' :key='item.id' @click="showStation(scope.row,item)">{{item.workStationName}}</el-button>
          </template>
          <el-button type="text" @click="showStation(scope.row,{})" v-else>请选择工位</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="deptName" label="属性"> </el-table-column>
    </el-table>
    <userList
     :visibles.sync="userDialog.visible"
     :defaultValues="userDialog.defaultLineUsers"
     :branchinnercode="arrData.factoryDeptId"
     :selectableCallBack="selectableUserCallBack"
     :multiple="true"
     @closeDialog="closeUserDialog">
    </userList>

    <stationList
      :visibles.sync="stationDialog.visible"
      :disabledData="disabledData"
      :defaultValues="stationDialog.selectStationList"
      :arrData="stationDialog.arrData"
      :multiple="true"
      @closeDialog="closeStationDialog">
    </stationList>
  </div>
</template>
<script>
  import organizationCascader from "@/views/components/organizationCascader";
  import stationList from "@/views/components/stationList";
  import { getDaylyUserArrangement } from "@/api/factory";
  import {getUnSelectableUsernamesByWorkshopCode} from "@/api/prodLineMgmt/productionLineUser";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    //已经存在成员
    memberList:{
      type:Array,
      default:()=>[]
    },
    //工厂，车间，产线等id和code
    arrData:{
      type:Object,
      default: ()=>{}
    }
  },
  data() {
    return {
      groupMemberList:[],
      userDialog: {
        visible: false,
        disabledUser: [],         //过滤不可选人员
        defaultLineUsers:[]      //默认已经选中的人员
      },
      stationDialog:{
        arrData:{},             //过滤条件
        visible: false,
        selectStationList:[],   //当前员工的工位列表(有多个工位)
        selectSectionId:null,   //调整工位关联的工序
        selectUserId:null      //调整工位的成员id
      },
      disabledData:{
        factory:true,
        workshop:true,
        line:true
      },
      //过滤无权限人员
      selectableUserCallBack: (row) => {
        return !this.userDialog.disabledUser.includes(row.username);
      },
    };
  },

  methods: {
    openUserDialog(){
      //过滤不可选的人，回填已经选中的成员
      getUnSelectableUsernamesByWorkshopCode(this.arrData.workshopCode).then((res) => {
        if(res.code == 200 && res.data){
          this.userDialog.disabledUser = res.data;
        }
      });
      this.userDialog.defaultLineUsers = this.groupMemberList;
      this.userDialog.visible = true
    },

    //确定增加成员
    closeUserDialog(list){
      if(list?.length){
        this.groupMemberList = [...list];
      }
      this.$emit("callbackMember",this.groupMemberList);
    },

    // 移除班组成员
    removeUser(){
      if(!this.$refs["memberTable"]?.selection?.length){
        this.msgWarning('请先选择要移除的成员!');
        return;
      }
      this.$confirm("本排班是否删除该员工?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
        const selection = this.$refs["memberTable"]?.selection.map((ele) => ele.userId);
        this.groupMemberList = this.groupMemberList.filter(item => !selection.includes(item.userId));
        this.$emit("callbackMember",this.groupMemberList);
      })
      .catch(() => {

      });
    },

    //调整工位
    showStation(row,staItem){
      this.stationDialog.selectUserId = row.userId;              //记录调整工位的成员
      this.stationDialog.arrData = Object.assign({},this.arrData,{
        workSectionId:staItem.workSectionId,
        lineCode:row.lineCodes
      });
      if(row?.workStationDtos?.length){//成员已经分配工位
        this.stationDialog.selectStationList = [{
          workStationId:staItem.id,
          workStationName:staItem.workStationName,
          workSectionId:staItem.workSectionId
        }]
        this.stationDialog.selectSectionId = staItem.workSectionId;    //记录调整工位的工序
      }else{
        this.stationDialog.selectStationList = [];
      }
      this.stationDialog.visible = true;
    },

    //确定调整工位，给当前选中人员增加工位
    closeStationDialog(list){
      let selectItem = this.groupMemberList.find(ele => ele.userId === this.stationDialog.selectUserId);
      if(list?.length){
        selectItem.workStationDtos = list.map(ele => {
          return {
            id:ele.workStationId,
            workStationName:ele.workStationName,
            workSectionId:ele.workSectionId
          }
        })
      }else{
        selectItem.workStationDtos = null;
      }
      this.$emit("callbackMember",this.groupMemberList);
    }
  },

  watch:{
    memberList:{
      handler(newVal){
        if(newVal?.length){
          this.groupMemberList = newVal
        }
      },
      deep: true,
      immediate: true
    }
  },

  components:{
    organizationCascader,
    stationList
  }
};
</script>
<style lang="scss" scoped>
.el-form {
  display: flex;
  flex-flow: wrap;
  .el-date-editor.el-input,
  .el-select {
    width: 100%;
  }
}
.tool-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin:20px 0
}
</style>
